<template>
    <div class="large-brokerLibrary">
        <a-table :loading="loading" :rowKey="(item,i)=>item.phone+'_'+i" :columns="columns" :data-source="pageData" :pagination="false">

        </a-table>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    loading = false;
    columns = [
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "姓名",
        },
        {
            align: "center",
            dataIndex: "placeUnit",
            key: "placeUnit",
            title: "所属单位",
        },
        {
            align: "center",
            dataIndex: "capabilityLevel",
            key: "capabilityLevel",
            title: "能力等级",
        },
        {
            align: "center",
            dataIndex: "phone",
            key: "phone",
            title: "联系方式",
        },
    ];
    
    mounted() {}
}
</script>
<style lang="scss">
.large-brokerLibrary {
    min-height: 20vh;
    max-height: 25vh;
    margin-top: 5px;
    overflow-y: auto;
    .ant-table-thead tr th,
    .ant-table-tbody tr td {
        padding: 4px 2px;
        font-size: 14px;
        border-bottom: unset;
    }
    .ant-table-thead tr th {
        background-color: rgba(6, 75, 115, 1);
        color: rgba(68, 187, 255, 1);
    }
    .ant-table-tbody tr td {
        color: #fff;
        text-shadow: 0px 0px 4px rgba(255, 116, 76, 0.4);
        border-right: solid 1px rgba(255, 255, 255, 0.1);
    }
    .ant-table-tbody tr td:last-child {
        border-right: unset;
    }
    .ant-table-row:nth-child(2n-1) {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .ant-table-placeholder{
        background-color: transparent;
        border-top: unset;
        border-bottom: unset;
    }
    .ant-empty-normal{
        color: rgb(68, 187, 255);
    }
}
</style>
